<template>
	<div class="lukeyDraw bg">
		<div class="lukeyDrawBg"><img src="../../assets/images/大转盘背景@2x.png" width="100%" /></div>

		<div class="userCatNum"  @click="showCar">{{ showUserCatNum }}</div>
		<div class="luckeyDarwGiftBox">
			<!-- 调用了大转盘抽奖组件，传入奖品列表，子父通信完成点击指针抽奖事件 -->
			<CanvasLuckyDraw ref="bigCan" :plateNum="showUserCatNum" @beganDraw="showPopup" />
		</div>
		<div class="luckeyDarwIntro">
			<div class="detailIntro">
				<span class="title">活动时间：</span>
				<div>{{ stratTime }}-{{ endTime }}</div>
			</div>
			<div class="detailIntro">
				<span class="title">参与资格：</span>
				<div>{{describe1}}</div>
				<div>{{describe2}}</div>
			</div>
		</div>
		<van-popup v-model="show" :safe-area-inset-bottom="true">
			<!--输入用户信息弹窗框 -->
			<div class="popUserInfo" v-if="popStyle == 1">
				<div class="headTitle">参与活动</div>
				<div class="inputBox">
					<span class="inputTitle">车牌号</span>
					<input type="text" placeholder="请输入车牌号" v-model="userCatNum" />
				</div>
				<div class="inputBox">
					<span class="inputTitle">手机号</span>
					<input type="text" placeholder="请输入手机号" v-model="userPhone" />
				</div>
				<div class="inputBox inputBoxBottom">
					<span class="inputTitle">验证码</span>
					<input type="text" placeholder="请输入验证码" class="phoneCode" v-model="phoneCode" />
					<div class="sendCode" @click="time == 0 ? sendPhoneCode() : ap()">
						<span v-if="time == 0">发送验证码</span>
						<span v-if="time > 0">{{ time }}s</span>
					</div>
				</div>
				<div class="twoButton">
					<button @click="buttonCancel">取消</button>
					<button @click="buttonEnsure">确定</button>
				</div>
			</div>

			<!--提示没有资格弹出框 -->
			<div class="popNoStatus" v-if="this.popStyle == 2">
				<div class="headTitle">提示</div>
				<div class="popNoStatusInfo">{{message}}</div>
				<div class="oneButton"><button @click="buttonCancel">确定</button></div>
			</div>

			<!-- 提示用户中奖弹出框 -->
			<div class="popGetGife" v-if="this.popStyle == 3">
				<!-- <img
          src="../../assets/images/恭喜您弹窗背景@2x.png"
          class="getGifeImg"
        /> -->
				<div class="intro" v-if="getGift == '谢谢参与'">谢谢参与</div>
				<div class="intro" v-else>获得{{ getGift }}，奖品已存至您的默认卡中，请注意查收哦~</div>
				<div class="QRcode"><img :src="codeImage" style="width: 100%;height: 100%;" alt="" /></div>
				<div class="note">扫描二维码前往查看</div>
				<div class="oneButton"><button @click="buttonCancel">确定</button></div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import CanvasLuckyDraw from '../../components/CanvasLuckyDraw';
import api from '../../http/api.js';
import { request } from '../../http';
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
	components: {
		CanvasLuckyDraw
	},
	data() {
		return {
			message:'很抱歉，你暂不符合参与条件',
			describe1:'',
			describe2:'',
			info: {
				carNum: '',
				phone: ''
			},
			isGet: 0, //是否有抽奖资格 0--否 1--是
			time: 0,
			stratTime: null,
			endTime: null,
			codeImage: null,
			show: true, //控制弹窗是否显示
			popStyle: 1, //1显示输入用户信息 2显示没有资格 3显示抽奖成功
			showUserCatNum: '--', //显示用户输入的车牌号
			userCatNum: '', //用户输入的车牌号
			userPhone: '', //用户输入的手机号
			phoneCode: '', //用户输入的手机验证码
			animationFinsh: true, //判断动画是否结束
			giftList: [],
			getGift: '' ,//获奖物品
			customerCode:''
		};
	},
	created() {
		let merchantCode = localStorage.getItem('merchantCode') || '';
		if (merchantCode == '') {
			localStorage.setItem('merchantCode', this.$route.query.merchantCode);
		}
		if (merchantCode != this.$route.query.merchantCode && this.$route.query.merchantCode != undefined) {
			localStorage.setItem('merchantCode', this.$route.query.merchantCode);
		}
	},
	methods: {
		showCar(){
			this.show = true 
			this.popStyle = 1
		},
		ap() {
			Toast('请不要频繁发送验证码');
		},
		getAward(customerCode) {
			let params = {
				merchantCode: localStorage.getItem('merchantCode'),
				customerCode
			};
			this.$api.getAward(params).then(res => {
				if (res.code == '10000') {
					this.stratTime = res.data.startTime;
					this.endTime = res.data.endTime;
					this.describe1=res.data.describe1
					this.describe2=res.data.describe2
				} else {
					alert(res.message);
				}
			});
		},
		testPhone(val) {
			let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
			if (!reg.test(val)) {
				alert('请输入正确的手机号');
				this.userPhone = '';
				return false;
			}
		},
		sendPhoneCode() {
			if (this.userCatNum == '') {
				alert('车牌号不能为空');
				return false;
			}
			if (this.customerPhone == '') {
				alert('手机号不能为空');
				return false;
			}
			if (this.customerPhone != '') {
				this.testPhone(this.userPhone);
			}
			this.time = 60;
			let timer = setInterval(() => {
				this.time--;
				// console
				if (this.time == 0) {
					clearInterval(timer);
				}
			}, 1000);
			let params = {
				customerPhone: this.userPhone, //手机号
				plateNum: this.userCatNum //车牌号
			};
			this.$api.sendCode(params).then(res => {});
		},
		buttonEnsure() {
			if (this.userCatNum == '') {
				alert('车牌号不能为空');
				return false;
			}
			if (this.customerPhone == '') {
				alert('手机号不能为空');
				return false;
			}
			if (this.customerPhone != '') {
				this.testPhone(this.userPhone);
			}
			if (this.phoneCode == '') {
				alert('验证码不能为空');
				return false;
			}
			let params = {
				merchantCode: localStorage.getItem('merchantCode'),
				customerPhone: this.userPhone, //手机号
				smsCode: this.phoneCode, //验证码
				plateNum: this.userCatNum //车牌号
			};
			this.$api.bindPhone(params).then(res => {
				if (res.successful) {
					this.getAward(res.data.customerCode);
					this.$refs.bigCan.getAward(res.data.customerCode);
					this.customerCode=res.data.customerCode
					this.showUserCatNum = this.userCatNum;
					this.isGet = res.data.isCoupon
					this.show = false;
					this.userPhone=''
					this.phoneCode=''
					this.userCatNum=''
					// alert(res.data.message)
				} else {
					alert(res.message);
				}
			});
		},
		showPopup() {
			if (this.showUserCatNum == '--') {
				this.show = true;
				this.popStyle = 2;
				this.message='请输入车牌号'
				return false;
			}
			if(this.isGet=='false'){
				this.show = true;
				this.popStyle = 2;
				return false;
			}
			//如果动画结束，可以进行下一次抽奖，节流
			if (this.animationFinsh) {
				//随机数模拟中奖商品下标
				//转盘初始化
				this.luckydrawInit();
				//调用转盘抽奖函数(奖品总量，获得奖品下标，旋转速度，动画时间)
				this.rotating(8, 6, 3);
			} else {
				alert('点击太快，请等动画执行完毕再重试');
			}
		},
		buttonCancel() {
			this.show = false;
		},

		//大转盘初始化
		luckydrawInit() {
			this.animationFinsh = false;
			//获取到canvas的dom
			let lukeyDrawImage = document.getElementsByClassName('bigDraw')[0];
			lukeyDrawImage.setAttribute(
				'style',
				`transition-duration:0s;
         transform:rotate(0deg)`
			);
		},
		getCodeImg() {
			this.$http
				.post(
					'https://autodt-gateway.yunchefu.cn/message/wechat/miniAppQrCode',
					{
						path: '/pages/redirect/index?from=secondaryCard',
						appId: 'wx7451a1aa96196cd1'
					},
					{
						headers: {},
						responseType: 'blob'
					}
				)
				.then(res => {
					this.codeImage = URL.createObjectURL(res);
				});
		},
		// 旋转大转盘函数，
		// giftNum表示奖品总数量，
		// giftIndex表示对应获奖奖品的下标,
		// speed表示旋转速度,越大旋转越快
		// time表示旋转动画的过渡时间
		async rotating(giftNum, speed, time) {
			let params = {
				merchantCode: localStorage.getItem('merchantCode'),
				customerCode: this.customerCode,
				plateNum: this.showUserCatNum
			};
			let param = {
				merchantCode: localStorage.getItem('merchantCode'),
				customerCode: this.customerCode
			};
			let arr = [];
			await this.$api.getAward(param).then(res => {
				if (res.code == '10000') {
					arr = res.data.awardList;
				} else {
					alert(res.message);
				}
			});
			let giftIndex;
			await this.$api.start(params).then(res => {
				if(res.code=='10000'){
					this.getCodeImg();
					this.getGift = res.data.award.awardName + '*' + res.data.award.awardCount;
					arr.map((val, idx) => {
						if (val.id == res.data.award.id) {
							giftIndex = idx;
						}
					});
					// console.log('giftIndex',giftIndex)
					this.isGet='false'
					setTimeout(() => {
						//获取canvas的dom
						let lukeyDrawImage = document.getElementsByClassName('bigDraw')[0];
						lukeyDrawImage.style.transition = `all ${time}s ease-out`;
						lukeyDrawImage.style.transform = `rotate(-${360 * speed + (360 / giftNum) * (giftIndex + 1) - 360 / giftNum / 2}deg)`;
						//设置定时器,动画结束后弹窗提示，设置动画结束
						setTimeout(() => {
							this.popStyle = 3;
							this.show = true;
							// this.getGift = this.giftList[giftIndex - 1].awardName;
							this.animationFinsh = true;
						}, time + '200');
					}, 0);
				}else{
					this.popStyle = 2;
					this.show = true;
					this.message=res.message
					// alert(res.message)
					return false
				}
			});
			
		}
	}
};
</script>

<style lang="scss" scoped>
.lukeyDraw {
	width: 100%;
	position: relative;
	.lukeyDrawBg {
		position: absolute;
		width: 100%;
		height: 1133px;
		// height: 100%;
	}
	.userCatNum {
		font-size: 40px;
		color: #a70e0c;
		position: absolute;
		top: 26.5%;
		width: 320px;
		left: 50%;
		margin-left: -162px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		z-index: 999;
	}
	.luckeyDarwGiftBox {
		// position: absolute;
		// top:400px;
		// margin-top: 30%;
		// height: 473px;
		// width: 473px;
		// position: absolute;
		// left: 50%;
		// margin-left: -237px;
		// top: 312px;
		// // top: 350px;
		// text-align: center;
		// .luckeyDarwGift {
		// 	height: 473px;
		// 	width: 473px;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	transition-property: all;
		// 	transition-timing-function: ease-out;
		// }
		// .luckeyDarwPointer {
		// 	height: 163px;
		// 	width: 109px;
		// 	position: relative;
		// 	top: 130px;
		// }
	}
	.luckeyDarwIntro {
		// height: 230px;
		width: 80%;
		border-radius: 20px;
		background-color: #fae09e;
		position: absolute;
		margin-top: 30%;
		left: 50%;
		// z-index: 9999;
		margin-left: -40%;
		padding: 40px;
		box-sizing: border-box;
		.detailIntro {
			font-size: 24px;
			color: #9c1616;
			.title {
				font-weight: bold;
				position: absolute;
			}
			div {
				margin-left: 140px;
				margin-bottom: 12px;
				line-height: 36px;
			}
		}
	}
	/deep/ .van-popup.van-popup--center {
		border-radius: 20px;
		background: transparent;
	}
	.popUserInfo {
		overflow: hidden;
		width: 620px;
		height: 540px;
		background-color: #ffffff;
		border-radius: 20px;
		font-size: 32px;
		.headTitle {
			color: #272727;
			height: 104px;
			line-height: 104px;
			text-align: center;
		}
		.inputBox {
			padding: 0 40px;
			height: 80px;
			margin-bottom: 3;
			display: flex;
			justify-content: space-between;
			line-height: 80px;
			margin-bottom: 30px;
			.inputTitle {
				padding-right: 16px;
			}
			input {
				height: 80px;
				background-color: #f5f5f9;
				border-radius: 10px;
				border: 0;
				padding-left: 30px;
				width: 390px;
			}
			.phoneCode {
				width: 250px;
			}
			.sendCode {
				text-align: center;
				width: 140px;
				font-size: 26px;
				color: #4883c0;
			}
		}
		.inputBoxBottom {
			margin-bottom: 0;
			padding-bottom: 36px;
			border-bottom: 1px solid #cdcdcd;
		}
		.twoButton {
			height: 100px;
			button {
				height: 100%;
				width: 50%;
				border: 0;
				background-color: #ffffff;
				&:last-of-type {
					border-left: 1px solid #cdcdcd;
					color: #4883c0;
				}
			}
		}
	}
	.popNoStatus {
		border-radius: 20px;
		background-color: #ffffff;
		overflow: hidden;
		color: #272727;
		font-size: 32px;
		height: 320px;
		width: 620px;
		.headTitle {
			color: #272727;
			text-align: center;
			margin-top: 40px;
		}
		.popNoStatusInfo {
			padding: 49px 0;
			text-align: center;
		}
		.oneButton {
			height: 100px;
			width: 100%;
			button {
				height: 100%;
				width: 100%;
				border: 0;
				background-color: #ffffff;
				color: #4883c0;
				text-align: center;
				border-top: 1px solid #cdcdcd;
			}
		}
	}
	.popGetGife {
		overflow: hidden;
		// background: transparent;
		width: 620px;
		height: 960px;
		background-image: url(../../assets/images/恭喜您弹窗背景@2x.png);
		background-size: 620px 920px;
		font-size: 32px;
		// .getGifeImg {
		//     display: f;
		//   width: 620px;
		//   height: 920px;
		// }
		.intro {
			padding: 360px 50px 0 50px;
			color: #272727;
			line-height: 52px;
			text-align: center;
			margin-bottom: 40px;
		}
		.QRcode {
			height: 250px;
			width: 250px;
			background: #272727;
			margin: 0 auto;
		}
		.note {
			font-size: 28px;
			color: #737373;
			text-align: center;
			height: 110px;
			line-height: 110px;
		}
		.oneButton {
			height: 100px;
			width: 100%;
			button {
				height: 100%;
				width: 100%;
				border: 0;
				background-color: #ffffff;
				color: #4883c0;
				text-align: center;
				border-top: 1px solid #cdcdcd;
			}
		}
	}
}
</style>
